<template>
  <div class="my-dialog">
    <vxe-modal
      show-footer
      show-confirm-button
      show-cancel-button
      show-zoom
      title="实体管理"
      resize
      :lock-view="false"
      :mask="false"
      v-model="visible"
      confirm-button-text="自定义确认"
      cancel-button-text="自定义取消"
      :width="340"
      :height="400"
      @close="handleClose"
      size="small"
      :position="{
        top: 40,
        left: 15,
      }"
    >
      <el-tree
        ref="entityTreeRef"
        :data="entityTree"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <template v-if="!data.show">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-view"
                @click="() => handleShowEntitiy(data, node)"
              >
              </el-button>
            </template>
            <template v-if="data.show">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-circle-close"
                @click="() => handleHiddenEntitiy(data, node)"
              >
              </el-button>
            </template>

            <el-button
              type="text"
              size="mini"
              icon=" el-icon-aim"
              @click="() => handleAim(data)"
            >
            </el-button>
          </span>
        </span>
      </el-tree>
    </vxe-modal>
  </div>
</template>

<script>
export default {
  name: "EntityManage",
  data() {
    return {
      visible: false,
      entityTree: [
        {
          id: 1,
          label: "红方",
          show: true,
          side: 1,
          children: [],
        },
        {
          id: 2,
          label: "蓝方",
          side: 2,
          show: true,
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {},
  methods: {
    open() {
      this.visible = true;
      let redData = window.viewer.entities.values.filter((item) => {
        return item.customName == "动态实体" && item.side == 1;
      });
      console.log(redData);
      let blueData = window.viewer.entities.values.filter((item) => {
        return item.customName == "动态实体" && item.side == 2;
      });
      this.entityTree[0].children = redData.map((item) => {
        return {
          id: item.id,
          label: item.name,
          show: item.show,
        };
      });
      this.entityTree[1].children = blueData.map((item) => {
        return {
          id: item.id,
          label: item.name,
          show: item.show,
        };
      });
    },
    handleClose() {
      let arr = window.viewer.entities.values.filter((item) => {
        return item.customName == "动态实体";
      });
      arr.forEach((item) => {
        item.point.show = false;
      });
      this.visible = false;
      this.$emit("menuClose", "entityManageRef");
    },
    // 节点点击
    handleNodeClick(data, node) {
      console.log("data,", data, node);
      let arr = window.viewer.entities.values.filter((item) => {
        return item.customName == "动态实体";
      });
      if (node.level !== 1) {
        arr.forEach((item) => {
          item.point.show = false;
        });
        let entity = window.viewer.entities.getById(data.id);
        if (entity.show) {
          entity.point.show = true;
        }
      }
    },
    // 显示实体
    handleShowEntitiy(data, node) {
      data.show = !data.show;
      if (node.level !== 1) {
        let entity = window.viewer.entities.getById(data.id);
        entity.show = data.show;
      } else {
        let entityArr = window.viewer.entities.values.filter((item) => {
          return item.side == data.side;
        });
        entityArr.forEach((item) => {
          item.show = data.show;
        });
      }
    },

    // 隐藏实体
    handleHiddenEntitiy(data, node) {
      data.show = !data.show;
      if (node.level !== 1) {
        let entity = window.viewer.entities.getById(data.id);
        entity.show = data.show;
      } else {
        let entityArr = window.viewer.entities.values.filter((item) => {
          return item.side == data.side;
        });
        entityArr.forEach((item) => {
          item.show = data.show;
        });
      }
    },
    handleAim(data) {
      let entity = window.viewer.entities.getById(data.id);
      window.viewer.trackedEntity = entity;
    },
  },
};
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
